<template>
  <section class="myteam-list">
    <cell>
      <img slot="icon" src="https://o5omsejde.qnssl.com/demo/test1.jpg" alt="img" style="border-radius: 50%">
      <div slot="title">
        <p>QinMu(推荐人)</p>
        <p>手机号：18888888888</p>
        <p>注册时间：2018-05-06 09:11</p>
      </div>
    </cell>
    <p class="tips">三级团队有效总人数： 0</p>
    <div class="tab-box">
      <tab>
        <tab-item selected @on-item-click="onItemClick">直推人数 5 </tab-item>
        <tab-item @on-item-click="onItemClick">二级人数 0</tab-item>
        <tab-item @on-item-click="onItemClick">三级人数 0</tab-item>
      </tab>
    </div>
    <group class="tab-container">
      <cell v-for="i in list" :key="i.id">
        <img slot="icon" :src="i.headurl" alt="img" style="border-radius: 50%">
        <div slot="title">
          <p>{{i.name}}</p>
          <p>
            {{i.level}}
            <span v-if="i.level"></span>
          </p>
          <p>手机号：{{i.phone}}</p>
          <p>注册时间：{{i.time}}</p>
        </div>
      </cell>
    </group>
  </section>
</template>

<script>
  import {Cell, Group, Tab, TabItem} from 'vux'
  export default {
    name: 'MyTeam',
    components: {
      Cell,
      Group,
      Tab,
      TabItem
    },
    data () {
      return {
        list: [
          {id: 1, headurl: 'https://o5omsejde.qnssl.com/demo/test1.jpg', name: 'Andy', level: '1', phone: '15312345678', time: '2018-06-06 12:00'},
          {id: 2, headurl: 'https://o5omsejde.qnssl.com/demo/test2.jpg', name: 'Joshua', level: '1', phone: '15312345678', time: '2018-06-06 12:00'},
          {id: 3, headurl: 'https://o5omsejde.qnssl.com/demo/test3.jpg', name: '艾斯蒂尔', level: '1', phone: '15312345678', time: '2018-06-06 12:00'},
          {id: 4, headurl: 'https://o5omsejde.qnssl.com/demo/test4.jpg', name: 'Anna', level: '1', phone: '15312345678', time: '2018-06-06 12:00'},
          {id: 5, headurl: 'https://o5omsejde.qnssl.com/demo/test5.jpg', name: 'Bobi', level: '1', phone: '15312345678', time: '2018-06-06 12:00'}
        ]
      }
    },
    methods: {
      onItemClick (index) {
        console.log(index)
      }
    }
  }
</script>

<style lang="less" scoped>
  .myteam-list {
    background-color: #fff;
    .tips {
      padding: 15px;
      text-align: center;
      background-color: #f2f2f2;
    }
    .tab-box　{
    }
    .tab-container {
    }
  }
</style>
